<template>
     <div class="login-container">
        <el-form class="login-form" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
        label-width="0px">
        <div>
            <p class="login-title">用户注册</p>
            <div class="inforBox"><span v-if="loginErrorInfor">{{loginErrorInfor}}</span></div>
            <el-form-item prop="account">
                <el-input name="username" type="text" v-model="loginForm.account" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input name="password" type="password" @keyup.enter.native="handleRegister" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item prop="userType" label="选择角色" label-width="90px">
                 <el-radio-group v-model="loginForm.userType">
                    <el-radio label="1">教师</el-radio>
                    <el-radio label="2">学生</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="login-btn">
                <el-button type="primary" :loading="loading" @click.native.prevent="handleRegister">注册</el-button>
            </div>
            <span class="go" @click="goLogin">去登录</span>
        </div>
        </el-form>
    </div>
</template>
<script>
import {register} from 'api/login'
export default {
  data () {
    return {
      loginErrorInfor: null, // 登录失败的提示
      loginForm: {
        account: '',
        password: '',
        userType: ''// 用户类型
      },
      loginRules: {
        account: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [
          { required: true, trigger: 'blur', message: '请输入密码' },
          { min: 3, max: 16, message: '密码长度为6到16个字符', trigger: 'blur' }
        ],
        userType: [{ required: true, trigger: 'blur', message: '请选择角色' }]
      },
      loading: false
    }
  },
  methods: {
    //   注册
    handleRegister () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          register(this.loginForm.account, this.loginForm.password, this.loginForm.userType).then(res => {
            this.loading = false
            this.loginForm.account = ''
            this.loginForm.password = ''
            this.loginForm.userType = ''
            this.$message.success('注册成功')
          }).catch(res => {
            this.loading = false
          })
        }
      })
    },
    // 去登陆i
    goLogin () {
      this.$router.push('/')
    }
  }
}
</script>
<style lang="scss" scoped>
.login-container{
    height: 100vh;
    .login-form{
        padding:30px;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        background: #fff;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 400px;
        .login-title{
            height: 80px;
            line-height: 80px;
        }
        .go{
            font-size: 14px;
            position: absolute;
            right:40px;
            bottom:40px;
            cursor: pointer;
        }
    }
}
</style>
